<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/include/taglibs.jsp"%>

<script type="text/javascript">
//오늘날짜
var nowDate = null;
//화면에 보이는 설정된 날짜
var setDate = null;

var rooms = null;

// 0,1,2,3,4,5,6 : 일,월,화,수,목,금,토
var dayOfTheWeek = "0";

$(document).ready(function(){
	setDate = new Date(${fn:substring(selDt,0,4)},${fn:substring(selDt,4,6)-1},${fn:substring(selDt,6,8)});
	
	nowDate  = new Date().toString("yyyyMMdd");
	
	//객실 정보 가져오기
	var option = {
			url: "./pere101Q.do",
			data : {"p_id":'${param.p_id}'},
			success : function(json){
				rooms = json;
				changeNewDate(0);
			}
	};
	$.getJson(option);
	
});


//테이블에 쓸 객실명 가져오기
var tableRooms="";
function getTableRooms(){
	if(tableRooms==""){
		return setTableList();
	}else{
		return tableRooms;
	}
}

function changeNewDateRedirect(num){
	var ddd = setDate.clone();
	ddd.addMonths(num);
	ddd.set({day:1});
	location.href="./${pageUrl}?p_id=${param.p_id}&reservation_dt="+ddd.toString("yyyyMM");
}

//다음달 표시 옵션
var nextMonthYn=false;

//달력을 갱신한다
function changeNewDate(plusVal){
	
	//오늘 무슨요일인지 구하기
	var dt_tmp = setDate.toString("ddd");

	//1일이 수요일이면 dateAdd = 3로 시작하기 위해 처리 0부터 시작
	for(var i=0; i < Date.CultureInfo.abbreviatedDayNames.length;i++){
		if(dt_tmp == Date.CultureInfo.abbreviatedDayNames[i]){
			dayOfTheWeek=i;
			break;
		}
	}

	$(".tt").remove();
	setDate.addMonths(plusVal);
	
	setYYYYMM();
	
// 	alert(nextMonth.getDaysInMonth());
	var totalDays =setDate.getDaysInMonth();
	
	var date1 = setDate.clone();
	date1.set({day:1});
		
	var dayName = date1.toString("ddd");
	var dateAdd = 0;


	//1일이 수요일이면 dateAdd = 3로 시작하기 위해 처리 0부터 시작
	for(var i=0; i < Date.CultureInfo.abbreviatedDayNames.length;i++){
		if(dayName == Date.CultureInfo.abbreviatedDayNames[i]){
			dateAdd=i;
			break;
		}
	}

	//다음달 정보
	var chkHideMonth = setDate.getDaysInMonth()+dateAdd;
	var weekCntNext = parseInt(chkHideMonth / 7);
	if((chkHideMonth % 7)>0){
		weekCntNext++;
	}
	//weekCnt1만 씀
	
	var totalDaysAdd= totalDays+dateAdd;
	var weekCnt = parseInt(totalDaysAdd / 7);
	if((totalDaysAdd % 7)>0){
		weekCnt++;
	}

	var html="";
	for(var i=0; i < weekCnt;i++){
		html+="<tr align=\"center\" height=\"33\">";
		
		for(var j=1; j<=7;j++){
			if(j==1){
				html+="<td class=\"day"+((i*7)+j)+" redb\"></td>";
			}else if(j==7){
				html+="<td class=\"day"+((i*7)+j)+" blueb\"></td>";
			}else{
				html+="<td class=\"day"+((i*7)+j)+"\"></td>";	
			}
			
		}
		html+="</tr>";
	}
	$("#calTitle").after(html);
	
	
	for(var i = 1; i <= totalDays; i++ ){
		var day = date1.toString("d");
		if(i!=1 && day=="1"){
			day=date1.toString("M.d");
		}
		
		var htm_tb="<a "+
		"href=\"./${pageUrl}?p_id=${param.p_id}&reservation_dt="+date1.toString("yyyyMMdd")+"\" "+
			"class=\"\">"+day+"</a>";
		
		var calVal = "day_"+date1.toString("yyyyMMdd");
		
		$(".day"+(i+dateAdd)).html(htm_tb);
		$(".day"+(i+dateAdd)).html(htm_tb);
		if($(".day"+(i+dateAdd)).hasClass("blueb")){
			$(".day"+(i+dateAdd)).find("a").addClass("blueb");
		}else if($(".day"+(i+dateAdd)).hasClass("redb")){
			$(".day"+(i+dateAdd)).find("a").addClass("redb");
		}else{
			$(".day"+(i+dateAdd)).find("a").addClass("bold");
		}
		$(".day"+(i+dateAdd)).attr("id",calVal);
		date1.add(1).days();
	}
	
	var chkNowMonth = setDate.toString("yyyy")+setDate.toString("MM");
	var nowDateYYYYMM  = new Date().toString("yyyyMM");
	if(chkNowMonth==nowDateYYYYMM){
// 		오늘 이전 자료는 숨기기
		$(".tt").find("td").each(function (i){
			if($(this).attr("id")=="day_"+nowDate){
				return false;
			}
			
			$(this).find(".divDel").remove();;

		});	
	}else if(chkNowMonth>nowDateYYYYMM){//월이 오늘보다 크면 걍 두기
		
	}else{//이전이면 모두 어둡게 처리

	}
// 	alert(1);
// 	changeNewDate_N();
// 
// 	calTitle	타이틀

	//예약되어있는 룸 달력에 표시
	var option__ = {
		url: "./pere200_1Q.do",
		data : {"p_id":'${param.p_id}',"reservation_dt":"${selDt}"},
		success : function(json){
			//룸 갯수
			var roomCnt = rooms.list.length;

			//달력에 색칠하기
			if(json!=null && json.list.length>0){
// 				nowDate
				
// 				Date.compare(today, future);
				var nDataChk = new Date();
				nDataChk.set({year:Number(nowDate.substr(0,4)),month:Number(nowDate.substr(4,2))-1,day:Number(nowDate.substr(6,2))});
				$.each(json.list, function (i) {
					var nDataChk1 = new Date();
					nDataChk1.set({year:Number(this.reservation_dt.substr(0,4)),month:Number(this.reservation_dt.substr(4,2))-1,day:Number(this.reservation_dt.substr(6,2))});
					
// 					if(nDataChk- nDataChk1<0){
						if(roomCnt==this.cnt){
							//예약 다 찬거
							$("#day_"+this.reservation_dt).attr("bgcolor","#FAFC98");
						}else{
							//예약방이 남아 있는자료
							$("#day_"+this.reservation_dt).attr("bgcolor","#FEF0FE");
						}
// 					}
				
				});	
			}
// 			//오늘 날짜 표시 
// 			$("#day_"+nowDate).attr("bgcolor","#e3fefe");
			//선택된 날짜표시
			var chkIcon = "<div id=\"event\" style=\"position:absolute; z-index:0 display:block;width: 45px;\">"+
				"	<img src=\"/usr/images/res_icon_today.gif\" width=\"15\" height=\"15\" border=\"0\">"+
				"</div>";
			$("#day_${selDtTmp}").prepend(chkIcon);
		}
	};
// 	alert(2);
	$.getJson(option__);
	//빈 테이블 그레이 처리 
	$(".tt").find("td").each(function (i){
		if($(this).html()=="&nbsp;&nbsp;&nbsp;"){
			$(this).attr("bgcolor","#F8F6F7");
		}
	});	
}

//메인 날짜 변경
function setYYYYMM(){
	if('${selDtTmp}'.length==6){
		$("#yyyyMMdd").html(setDate.toString("yyyy")+"년 "+setDate.toString("MM")+"월");
	}else{
		$("#yyyyMMdd").html(setDate.toString("yyyy")+"년 "+setDate.toString("MM")+"월 "+setDate.toString("dd")+"일");
	}
	$("#year, .yearData").html(setDate.toString("yyyy"));
	$("#month, .monthData").html(setDate.toString("MM"));
	
}

//다음페이지 
function frmNext(status){
	$("#rm_status").val(status);
	$("#frmData").submit();
}
</script>


<table width="100%" border="0" cellspacing="0" cellpadding="10">
  <tr>
    <td>
<!-- content -->

<!-- <table width="100%" border="0" cellspacing="0" cellpadding="0"> -->
<!-- 	<tr> -->
<!-- 		<td width="50%" align="center"></td> -->
<!-- 		<td width="50%">&nbsp;</td> -->
<!-- 	</tr> -->
<!-- 	<tr> -->
<!-- 		<td align="center" style="padding-bottom: 5px; padding-top: 10px;"><table -->
<!-- 				width="75%" border="0" cellspacing="0" cellpadding="0"> -->
<!-- 				<tr> -->
<!-- 	                <td width="53"><a href="#" onclick="changeNewDateRedirect(-1);"><img src="/usr/images/res_lastm.gif" width="53" height="13"></a></td> -->
<!-- 	                <td align="center" class="ptrroom" style="padding-top: 2px;" id="yyyyMMdd"></td> -->
<!-- 	                <td width="53" align="right"><a href="#" onclick="changeNewDateRedirect(1);"><img src="/usr/images/res_nextm.gif" width="53" height="13"></a></td> -->
<!-- 				</tr> -->
<!-- 			</table></td> -->
<!-- 		<td align="right"></td> -->
<!-- 	</tr> -->
<!-- </table> -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td width="50%" align="left">
<!-- 			<table width="97%" border="0" cellpadding="0" cellspacing="1" -->
<!-- 				bgcolor="#f1f1f1"> -->
<!-- 				<tr> -->
<!-- 					<td height="30" colspan="7" align="left" bgcolor="#FEFCFD"><table -->
<!-- 							border="0" cellspacing="0" cellpadding="0"> -->
<!-- 							<tr> -->
<!-- 								<td width="10">&nbsp;</td> -->
<!-- 								<td class="month2" id="month">02</td> -->
<!-- 								<td class="year2" id="year">2012</td> -->
<!-- 							</tr> -->
<!-- 						</table></td> -->
<!-- 				</tr> -->
<!-- 				<tr align="center" id="calTitle"> -->
<!-- 					<td width="47" height="13" bgcolor="#FD636B"><img -->
<!-- 						src="/usr/images/realtime_sun.jpg" width="45" height="13"></td> -->
<!-- 					<td width="47"><img src="/usr/images/realtime_mon.jpg" -->
<!-- 						width="45" height="13"></td> -->
<!-- 					<td width="47"><img src="/usr/images/realtime_tue.jpg" -->
<!-- 						width="45" height="13"></td> -->
<!-- 					<td width="47"><img src="/usr/images/realtime_wed.jpg" -->
<!-- 						width="45" height="13"></td> -->
<!-- 					<td width="47"><img src="/usr/images/realtime_thu.jpg" -->
<!-- 						width="45" height="13"></td> -->
<!-- 					<td width="47" bgcolor="#85AD29"><img -->
<!-- 						src="/usr/images/realtime_fri.jpg" width="45" height="13"></td> -->
<!-- 					<td width="47" bgcolor="#4EA7FB"><img -->
<!-- 						src="/usr/images/realtime_sat.jpg" width="45" height="13"></td> -->
<!-- 				</tr> -->
<!-- 			</table> -->

			<div style="height: 25px;text-align: center;">
				<a href="#" onclick="changeNewDateRedirect(-1);"><img alt=""
					src="/camping/img/calendar_arrow_l.jpg"
					style="vertical-align: top; padding-top: 3px; padding-right: 10px;"></a>
				<strong style="font-size: 13px; font-weight: bold; font-family: Arial Black" id="yyyyMMdd"></strong> 
				<a href="#" onclick="changeNewDateRedirect(1);"><img alt="" src="/camping/img/calendar_arrow_r.jpg"
					style="vertical-align: top; padding-top: 3px; padding-left: 10px;"></a>
			</div>
			<table class="lCalTable" style="width: 98%;">
				<colgroup>
					<col width="100" />
					<col width="100" />
					<col width="100" />
					<col width="100" />
					<col width="100" />
					<col width="100" />
					<col width="100" />
				</colgroup>
				<tbody>
					<tr id="calTitle">
						<th class="calRed">일</th>
						<th>월</th>
						<th>화</th>
						<th>수</th>
						<th>목</th>
						<th>금</th>
						<th class="calBlue">토</th>
					</tr>
				</tbody>
			</table>
		</td>
		<td width="50%">

			<table width="100%" border="0" cellspacing="0" cellpadding="3">
				<tr>
					<td bgcolor="#edecec"><table width="100%" border="0"
							cellspacing="1" cellpadding="0">
							<tr align="center">
								<td height="32" bgcolor="#f5f5f5"><table border="0"
										cellspacing="0" cellpadding="0">
										<tr>
											<td class="bold"><span class="yearData"></span> 년
											<span class="monthData"></span> 월 예약리스트</td>
										</tr>
									</table></td>
							</tr>
							<%@ include file="/WEB-INF/jsp/usr/pe/re/pere7_top.jsp"%>

						</table>
						<table width="100%" border="0" cellspacing="1" cellpadding="0">
							<tr align="center">
								<td height="32" bgcolor="#f5f5f5"><table border="0"
										cellspacing="0" cellpadding="0">
										<tr align="center">
											<td class="bold">SMS , 휴대폰인증 관리</td>
										</tr>
									</table></td>
							</tr>
							<tr align="center">
								<td height="40" bgcolor="#ffffff" style="padding-left: 20px;"><table
										border="0" cellspacing="0" cellpadding="0">
										<tr align="center">
											<td class="greenb2"><a
												href="./pere1100Q.do?p_id=${param.p_id }" class="admres">SMS문자관리
													휴대폰인증관리</a></td>
										</tr>
										<c:if test="${'qweri45'==param.p_id }">
										<tr align="center" style="">
											<td class="greenb2"><a
												href="./pere1500Q.do?p_id=${param.p_id }" class="admres" target="_blank">
												<img id="chaImg" src="/usr/images/sms_bt.jpg" border=0 align=absmiddle >
												</a></td>
										</tr>
										</c:if>
									</table></td>
							</tr>
						</table></td>
				</tr>
			</table>
		</td>
	</tr>
</table>
<form action="" method="get">
<input name="p_id" value="${param.p_id }" type="hidden"/>
<input name="reservation_dt" value="${param.reservation_dt }" type="hidden"/>
<input name="rm_status" value="${param.rm_status }" type="hidden"/>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
		<tr>
			<td width="50%" align="center">
			</td>
			<td align="right"><select name="src_condition" id="fd">
					<option value="1" <c:if test="${param.src_condition=='1' }">selected="selected"</c:if>>예약자</option>
					<option value="2" <c:if test="${param.src_condition=='2' }">selected="selected"</c:if>>이메일</option>
					<option value="3" <c:if test="${param.src_condition=='3' }">selected="selected"</c:if>>전화번호</option>
			</select> <input type="text" name="src_val" id="skey" value="${param.src_val }"> <input
				type="submit" name="search" id="search" value="검색"></td>
		</tr>
</table>
</form>